fix(components/toast): add new token value for last toast when display direction is `NewestOnTop` by Blackbaud-SandhyaRajasabeson · Pull Request #4382 · blackbaud/skyux

Blackbaud-SandhyaRajasabeson · 2026-04-17T16:57:36Z

Summary by CodeRabbit

Style
- Refined the spacing and positioning of toast notifications when displaying with newest notifications on top, providing a more polished and organized notification stack experience. Improved vertical alignment enhances visual clarity when multiple notifications are displayed simultaneously.

coderabbitai · 2026-04-17T16:57:43Z

📝 Walkthrough

Walkthrough

The changes implement a CSS class-based mechanism for the "newest on top" toast display direction. A protected signal in the toaster component conditionally applies the sky-toaster-newest-on-top class to the host element, with corresponding SCSS styles and test coverage validating this behavior.

Changes

Cohort / File(s)	Summary
Toaster Component Logic `libs/components/toast/src/lib/modules/toast/toaster.component.ts`	Added `isNewestOnTop` signal initialized from `displayDirection` option and host binding that conditionally applies the `sky-toaster-newest-on-top` CSS class.
Toast Styling `libs/components/toast/src/lib/modules/toast/toast.component.scss`	Added `.sky-theme-modern .sky-toaster-newest-on-top` style override targeting `sky-toast:last-child` with increased bottom margin for modern theme support.
Component Tests `libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts`	Added two test cases verifying host CSS class presence/absence based on `displayDirection` option values (`NewestOnTop` vs `OldestOnTop`).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A signal springs to life so bright,
CSS classes binding tight,
Toasts stack newest on the top,
Modern themes will never flop! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a new token value for styling the last toast when using NewestOnTop display direction, which is evidenced by the SCSS styling override, TypeScript signal binding, and test additions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch toaster-bottom-padding-omnibar

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Blackbaud-SandhyaRajasabeson · 2026-04-17T16:58:19Z

@coderabbitai review

coderabbitai · 2026-04-17T16:58:24Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

nx-cloud · 2026-04-17T16:59:48Z

View your CI Pipeline Execution ↗ for commit aaf9b0b

Command	Status	Duration	Result
`nx build code-examples-playground --baseHref=ht...`	✅ Succeeded	4m 8s	View ↗
`nx build playground --baseHref=https://blackbau...`	✅ Succeeded	1m 47s	View ↗
`nx build integration --baseHref=https://blackba...`	✅ Succeeded	42s	View ↗

☁️ Nx Cloud last updated this comment at 2026-04-17 17:06:02 UTC

coderabbitai

🧹 Nitpick comments (1)

libs/components/toast/src/lib/modules/toast/toast.component.scss (1)

259-263: Use an override variable for the new bottom margin token.

This new rule directly uses --sky-comp-omnibar-toaster-space-inset-bottom; it should route through sky-default-overrides with a fallback, consistent with the file’s override pattern.

Proposed fix

 `@include` compatMixins.sky-default-overrides('.sky-toast') {
@@
   --sky-override-toast-info-success-exclamation-path-color: #{$sky-highlight-color-info};
   --sky-override-toast-margin-bottom: #{$sky-margin-double};
+  --sky-override-toast-margin-bottom-newest-on-top-last-child: var(--sky-comp-omnibar-toaster-space-inset-bottom);
   --sky-override-toast-padding: 0 #{$sky-padding};
 }
@@
   .sky-toaster-newest-on-top {
     sky-toast:last-child {
       .sky-toast {
-        margin-bottom: var(--sky-comp-omnibar-toaster-space-inset-bottom);
+        margin-bottom: var(
+          --sky-override-toast-margin-bottom-newest-on-top-last-child,
+          var(--sky-comp-omnibar-toaster-space-inset-bottom)
+        );
       }
     }
   }

As per coding guidelines, "When using a CSS variable with its current value, find the existing location matching the variable name, assign the new variable that value, and use the new variable in the current location with the given fallback."

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@libs/components/toast/src/lib/modules/toast/toast.component.scss` around
lines 259 - 263, The rule in .sky-toaster-newest-on-top > sky-toast:last-child >
.sky-toast uses --sky-comp-omnibar-toaster-space-inset-bottom directly; instead
add a corresponding override variable in the sky-default-overrides block (e.g.,
--sky-toast-omnibar-space-inset-bottom) that falls back to
--sky-comp-omnibar-toaster-space-inset-bottom, and then use that new override
variable in the .sky-toast margin-bottom declaration so it follows the file's
override pattern and provides a proper fallback.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@libs/components/toast/src/lib/modules/toast/toast.component.scss`:
- Around line 259-263: The rule in .sky-toaster-newest-on-top >
sky-toast:last-child > .sky-toast uses
--sky-comp-omnibar-toaster-space-inset-bottom directly; instead add a
corresponding override variable in the sky-default-overrides block (e.g.,
--sky-toast-omnibar-space-inset-bottom) that falls back to
--sky-comp-omnibar-toaster-space-inset-bottom, and then use that new override
variable in the .sky-toast margin-bottom declaration so it follows the file's
override pattern and provides a proper fallback.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 7f2eba9b-111a-41fc-b63e-265e4cb5d9f1

📥 Commits

Reviewing files that changed from the base of the PR and between c2faf1b and aaf9b0b.

⛔ Files ignored due to path filters (1)

apps/code-examples/src/assets/stack-blitz/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

libs/components/toast/src/lib/modules/toast/toast.component.scss
libs/components/toast/src/lib/modules/toast/toaster.component.spec.ts
libs/components/toast/src/lib/modules/toast/toaster.component.ts

blackbaud-sky-build-user · 2026-04-17T17:08:06Z

Storybook preview

Component Storybooks:

Apps:

Blackbaud-SteveBrush

Do you mind adding a toggle to the playground to set newestOnTop so we can test it out manually? Also, if a visual test is valuable, we should consider writing one.

Blackbaud-SandhyaRajasabeson · 2026-04-23T14:06:44Z

+
+  protected isNewestOnTop = signal(
+    this.#containerOptions?.displayDirection ===
+      SkyToastDisplayDirection.NewestOnTop,


Not to whoever picks up this story next: This needs to be a computed signal so that the spacing changes if consumers change direction

Sandhya Adhirvuh added 2 commits April 17, 2026 12:51

add class

34f775c

unit test

aaf9b0b

Blackbaud-SandhyaRajasabeson temporarily deployed to e2e-team-members April 17, 2026 16:57 — with GitHub Actions Inactive

Blackbaud-SandhyaRajasabeson added the risk level (author): 1 No additional bugs expected from this change label Apr 17, 2026

coderabbitai Bot reviewed Apr 17, 2026

View reviewed changes

Blackbaud-SandhyaRajasabeson assigned Blackbaud-SteveBrush Apr 17, 2026

Blackbaud-SteveBrush reviewed Apr 20, 2026

View reviewed changes

Blackbaud-SandhyaRajasabeson commented Apr 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(components/toast): add new token value for last toast when display direction is `NewestOnTop`#4382

fix(components/toast): add new token value for last toast when display direction is `NewestOnTop`#4382
Blackbaud-SandhyaRajasabeson wants to merge 2 commits into13.x.xfrom
toaster-bottom-padding-omnibar

Blackbaud-SandhyaRajasabeson commented Apr 17, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Apr 17, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Blackbaud-SandhyaRajasabeson commented Apr 17, 2026

Uh oh!

coderabbitai Bot commented Apr 17, 2026

Uh oh!

nx-cloud Bot commented Apr 17, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

blackbaud-sky-build-user commented Apr 17, 2026

Uh oh!

Blackbaud-SteveBrush left a comment

Uh oh!

Blackbaud-SandhyaRajasabeson Apr 23, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Blackbaud-SandhyaRajasabeson commented Apr 17, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

Blackbaud-SandhyaRajasabeson commented Apr 17, 2026

Uh oh!

coderabbitai Bot commented Apr 17, 2026

Uh oh!

nx-cloud Bot commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

blackbaud-sky-build-user commented Apr 17, 2026

Uh oh!

Blackbaud-SteveBrush left a comment

Choose a reason for hiding this comment

Uh oh!

Blackbaud-SandhyaRajasabeson Apr 23, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Blackbaud-SandhyaRajasabeson commented Apr 17, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 17, 2026 •

edited

Loading

nx-cloud Bot commented Apr 17, 2026 •

edited

Loading